<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-table.min.css">
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.form.js"></script>
    <script src="js/bootstrap-table.min.js"></script>
    <script src="js/bootstrap-table-zh-CN.min.js"></script>
    <style>
        a:link {
            color: blue;
            text-decoration: none;
        }

        a:visited {
            color: purple;
            text-decoration: none;
        }

        body {
            background: url("/img/timg.jpg") no-repeat center center;
            background-size: cover;
            background-attachment: fixed;
            background-color: #CCCCCC;
        }
    </style>
</head>
<body>
<!--注册-->
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="row clearfix">
                <div class="col-md-12 column">
                    <div style="text-align:center">
                    </div>
                </div>
            </div>
            <div class="row clearfix">
                <div class="col-md-4 column">
                </div>
                <div class="col-md-4 column">
                    <h2 class="sub-title">

                        <br>
                        <br>
                        <div>生活热爱分享 -</div>
                        <div>Thousands Find</div>
                    </h2>
                    <div class="row clearfix">
                        <div class="col-md-6 column">
                            <a href="register.html">
                                <h2>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button
                                        class="btn btn-primary">注册
                                </button>
                                </h2>
                            </a>
                        </div>
                        <div class="col-md-6 column">
                            <a href="/login.html">
                                <h2>&nbsp;&nbsp;<button class="btn btn-default">登录</button>&nbsp;&nbsp;</h2>
                            </a>
                        </div>
                    </div>
                        <div class="form-group">
                            <label>用户名</label>
                            <input type="text" class="form-control" id="username" name="username"
                                   placeholder="6到16位（字母，数字，下划线，减号）" required="" onblur="checkUserName(this.value)"/>
                            <span id="code_msg" style="color: red"></span>
                        </div>
                        <br>
                        <div class="form-group">
                            <label>密码</label>
                            <input type="password" class="form-control" name="password" id="password"
                                   placeholder="6到16位（字母，数字，下划线，减号）" required="" onblur="checkPassword(this.value)"/>
                            <span id="psw_msg" style="color: red"></span>
                        </div>
                        <br>
                        <div class="form-group">
                            <label>手机号</label>
                            <input type="text" class="form-control" name="phone" id="phone" placeholder="请输入正确的11位手机号"
                                   required="" onblur="checkMobile(this.value)"/>
                            <span id="psw_mo" style="color: red"></span>
                        </div>
                        <button id="reg" type="submit" class="btn btn-default">注册</button>
                </div>
                <div class="col-md-4 column">
                </div>
            </div>
            <div class="row clearfix">
                <div class="col-md-12 column">
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">

    function checkUserName(obj) {
        var username = obj;
        var checkUserNameResult = document.getElementById("code_msg");
        if (username.match(/^[a-zA-Z0-9_-]{6,16}$/)) {
            checkUserNameResult.innerHTML = "";
            obj.focus();
        } else {
            checkUserNameResult.innerHTML = "请输入正确的账号";
        }
    }
</script>
<script type="text/javascript">


    $(function () {
        //为输入框绑定事件
        $("#username").blur(function () {
            //当失去焦点获得输入框的内容
            var username = $(this).val();
            //    console.log(username);
            var checkUserNameResult = document.getElementById("code_msg");
            //alert(username);
            //去服务器校验该用户名是否存在   ajax
            var param = {
                username: username
            }
            $.post("/user/regist", param, function (resp) {
                if (resp == "error") {
                    console.log(1);
                    checkUserNameResult.innerHTML = "用户名已存在";
                } else {
                }
            })
        })
    })

    function checkUserName(obj) {
        var username = obj;
        var checkUserNameResult = document.getElementById("code_msg");
        if (username.match(/^[a-zA-Z0-9_-]{6,16}$/)) {
            checkUserNameResult.innerHTML = "";
            // obj.focus();
        } else {
            checkUserNameResult.innerHTML = "请输入正确的账号";
        }
    }

</script>

<script type="text/javascript">
    function checkPassword(obj) {
        var password = obj;
        var checkPasswordResult = document.getElementById("psw_msg");
        if (password.match(/^[a-zA-Z0-9_-]{6,16}$/)) {
            checkPasswordResult.innerHTML = "";
            // obj.focus();
        } else {
            checkPasswordResult.innerHTML = "请输入正确格式的密码";
        }
    }
</script>

<script type="text/javascript">
    function checkMobile(obj) {
        var mobile = obj;
        var checkMobileResult = document.getElementById("psw_mo");
        if (mobile.length == 11 && mobile.match(/^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/)) {
            checkMobileResult.innerHTML = "";
            //  obj.focus();
        } else {
            checkMobileResult.innerHTML = "请输入正确的手机格式";
        }
    }
</script>
<script>
    $(function () {
        $("#reg").click(function () {
            var username = $("#username").val()
            var password = $("#password").val()
            var phone = $("#phone").val()
            $.ajax({
                url: "/user/register",
                type: "post",
                data: {
                    "username": username,
                    "password": password,
                    "phone": phone
                },
                dataType: "json",
                success: function (rs) {
                    if (rs.msg == "success") {
                        alert("注册成功")
                        location.href = "/login.html"
                    } else {
                        var msg = rs.message;
                        $("#username").next().html(msg)
                        $("#username").next().css("color", "red");
                        $("#password").next().html(msg)
                        $("#password").next().css("color", "red")
                        $("#phone").next().html(msg)
                        $("#phone").next().css("color", "red")
                    }
                }
            })
        })
    })
</script>
</html>